<template>
  <view class="app-container my-contract-list-page">
    <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" class="list-wrapper">
      <view class="my-contract-list">
        <view class="my-contract-item" v-for="(item, index) in list" :key="item.id">
          <hxk-card>
            <template v-slot:header>
              <view class="header">
                <view class="title">{{ contractTypeMapping[item.contractType] }}</view>
                <view class="status">
                  <dict-tag :options="dict.type.lessee_contract_status" :value="item.lesseeContractStatus"></dict-tag>
                </view>
              </view>
            </template>
            <template v-slot:body>
              <view class="body">
                <view class="address">
                  <u-text lines="1" :text="item.premisesAddress"></u-text>
                </view>
                <view class="rental_period">
                  <text>租住周期：{{ item.checkInTime }} 至 {{ item.checkOutTime }}</text>
                </view>
              </view>
            </template>
            <template v-slot:footer>

              <!--<p>合同类型: {{item.contractType}}</p>-->
              <!--<p>partyBSignFlag: {{item.partyBSignFlag}}</p>-->
              <view class="footer">

                
                <view class="btn">
                  <u-button @click="viewBillList(list[index].lesseeContractId)" text="查看账单"></u-button>
                </view>

                <!--状态为"已签署" "已终止" "已逾期" 才显示删除按钮-->
                <view class="btn"
                      v-if="[CONTRACT_STATUS.SIGNED, CONTRACT_STATUS.TERMINATED, CONTRACT_STATUS.OVERDUE].includes(list[index].lesseeContractStatus)">
                  <u-button type="info" @click="del(list[index].lesseeContractId)" text="删除"></u-button>
                </view>
                <view class="btn">
                  <u-button type="info" @click="viewDetail(list[index])" text="合同详情"></u-button>
                </view>

                <!--签署合同-->
                <!--1.满足电子合同(3), 2.partyBSignFlag(租客签约状态) === '0'(未签约), 3.lesseeContractStatus === '2'(待签约)-->
                <view class="btn" v-if="item.contractType === '3' && item.partyBSignFlag === '0' && item.lesseeContractStatus === '2'">
                  <u-button type="info" @click="sign(list[index])" text="签约"></u-button>
                </view>

                <!--1.满足电子合同(3), 2.partyBSignFlag === '1'(1:乙方已签署 0: 乙方未签署) -->
                <view class="btn" v-if="item.contractType === '3' && item.partyBSignFlag === '1' ">
                  <u-button type="info" disabled text="已签约"></u-button>
                </view>

              </view>
            </template>
          </hxk-card>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
import HxkCard from "@/components/hxk-card/index";
import {deleteMyContract, myContract, myContractSigning} from "@/api/mine/other";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins";
import {formatDateString} from "@/utils/common";
import {CONTRACT_STATUS, CONTRACT_TYPE} from "@/components/app-constant";
import {tenantEleContractPreview} from "@/api/mine/owner";

export default {
  computed: {
    CONTRACT_STATUS() {
      return CONTRACT_STATUS
    }
  },
  mixins: [MescrollMixin],
  components: {HxkCard},
  dicts: ['lessee_contract_status'],
  data() {
    return {
      // 1. 个人的纸质合同 2.企业纸质合同 3.个人电子合同
      categories: [
        {label: '全部', value: ''},
        {label: '纸质合同', value: ['1', '2']},
        {label: '电子合同', value: '3'}
      ],
      // 合同类型映射:1.个人纸质合同;2.企业纸质合同;3.个人电子合同;
      contractTypeMapping: {
        1: '纸质合同',
        2: '纸质合同',
        3: '电子合同'
      },
      list: [],
      queryParams: {}
    };
  },
  methods: {
    formatDateString,
    upCallback(page) {
      const data = {
        "pageNum": page.num,
        "pageSize": page.size
      }
      this.queryParams = {
        ...this.queryParams,
        ...data
      }
      myContract(this.queryParams).then(res => {
        this.mescroll.endBySize(res.rows.length, res.total)
        if (page.num === 1) this.list = [];
        this.list = this.list.concat(res.rows);
      }).catch(() => {
        this.mescroll.endErr();
      })
    },
    viewBillList(lesseeContractId) {
      console.log("根据合同id查询账单: " + lesseeContractId)
      this.$tab.navigateTo('/pages/mine/other/my-contract/bill-list?lesseeContractId=' + lesseeContractId)
    },
    // 租客签订合同
    sign(item) {
      console.log("签署合同: " + item)
      const data = {
        "lesseeContractId": item.lesseeContractId, //合同id
        "redirectUrl": "/pages/mine/other/my-contract/list",
      }
      myContractSigning(data).then(res => {
        const url = encodeURIComponent(res.data);
        // this.$tab.navigateTo(`/pages/common/webview/index?url=${url}`)

        this.$tab.navigateTo("/pagesFace/pages/webview/webview?url=" + url)
      })
    },
    // 查看合同详情
    viewDetail(item) {
      // 判断是电子合同还是纸质合同
      if (item.contractType === CONTRACT_TYPE.ELECTRONIC) {
        const data = {
          lesseeContractId: item.lesseeContractId,
          redirectUrl: "/pages/mine/other/my-contract/list"
        }
        tenantEleContractPreview(data).then(res => {
          const url = encodeURIComponent(res.data);
          // this.$tab.navigateTo(`/pages/common/webview/index?url=${url}`)
          this.$tab.navigateTo("/pagesFace/pages/webview/webview?url=" + url)
        })
      } else if (item.contractType === CONTRACT_TYPE.PERSONAL_PAPER || item.contractType === CONTRACT_TYPE.ENTERPRISE_PAPER) {
        this.$tab.navigateTo('/pages/mine/other/my-contract/detail?id=' + item.lesseeContractId)
      }
    },
    del(id) {
      this.$modal.confirm('删除后数据无法恢复，确认删除合同？').then(() => {
        deleteMyContract(id).then(res => {
          this.$modal.msg('删除成功')
          this.mescroll.resetUpScroll()
        })
      })
    }
  }
}
</script>

<style lang="scss">
.my-contract-list-page {
  .my-contract-list {
    padding: 20rpx;

    .my-contract-item {
      margin-bottom: 20rpx;

      .header {
        display: flex;
        justify-content: space-between;

        .title {
          font-size: 32rpx;
          color: #111;
        }


        .status {
          font-size: 28rpx;
          //&.completed {
          //  color: $u-success-dark;
          //}
          //&.pending {
          //  color: $u-warning-dark;
          //}
        }
      }

      .body {
        .address {
          font-size: 28rpx;
          color: #666;
          margin-top: 20rpx;
        }

        .rental_period {
          font-size: 28rpx;
          color: #666;
          margin-top: 20rpx;
        }

      }

      .footer {
        display: flex;
        justify-content: flex-end;

        .btn {
          font-size: 28rpx;

          .u-button--info {
            border: none !important;
            color: #000000 !important;
          }
        }
      }

    }
  }

}

</style>